<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景</title>
        <style type="text/css">
            body { margin: 0 ; padding:  0 ; background: #9932CC ;}
            .wrapper {
                width: 80% ;
                height: 500px ;
                margin: 25px auto ;
                border: 1px solid blue ;
            }

            .first {
                background-color: #dedede ;
                background-image: url("code.webp");
                background-repeat: no-repeat ;
                background-attachment: scroll ;
                background-position: center ;
                background-size: contain ;
            }

            .second {
                /* 在一个 background 属性中声明多个背景属性  */
                /* 一般书写顺序为: 背景颜色  背景图像  重复方式  固定方式 图像位置 */
                /* 如果某一个属性的取值没有指定则采用默认值 */
                background: #dedede url( "code.webp" ) no-repeat scroll center ;
                background-size: contain ; /* CSS 3 新增属性 ( 现代浏览器都支持 ) */
            }

            .third {
                background: #dedede url( "code.webp" );
                background-size: 25% ;
            }

            .fourth {
                background: url( "code.webp" ) no-repeat center ;
                background-size: contain ;
            }
        </style>
    </head>
    <body>

        <div class="wrapper first"></div>
        <div class="wrapper second"></div>
        <div class="wrapper third"></div>
        <div class="wrapper fourth"></div>
        
    </body>
</html>